<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common_head :: commonHead('v2ray账号')"></head>
<body>
<style>
    @media only screen and (max-width: 768px) {
        .el-col + .el-col {
            margin-top: 10px;
        }
    }
    .el-row + .el-row {
        margin-top: 10px;
    }

    .el-card + .el-card {
        margin-top: 10px;
    }

    .search .el-input__inner {
        border-radius: 10px;
    }
</style>

<el-container id="app" v-cloak>
    <el-header th:replace="v2ray/header :: header"></el-header>
    <el-main>
        <transition name="el-fade-in-linear" appear>
            <el-row style="margin-bottom: 10px">
                <el-col>
                    <el-alert title="修改完配置记得重启v2ray" type="warning" :closable="false"></el-alert>
                </el-col>
            </el-row>
        </transition>
        <transition name="el-fade-in-linear" appear>
            <el-row style="margin-bottom: 10px">
                <el-col>
                    <el-alert title="使用方法：点【添加】来增加一个账号，添加或修改账号之后点【重启】来使配置生效，不想用了可以点【关闭】，若关闭后想再次开启，点【重启】即可" type="warning" :closable="false"></el-alert>
                </el-col>
            </el-row>
        </transition>
        <transition name="el-zoom-in-top" appear>
            <el-card>
                <div slot="header">
                    <el-button type="success" size="mini" style="margin-left: 0" @click="openAdd">添加</el-button>
                    <el-button type="primary" size="mini" style="margin-left: 0" @click="restart">重启</el-button>
                    <el-button type="warning" size="mini" style="margin-left: 0" @click="resetAllTraffic">重置</el-button>
                    <el-button type="danger" size="mini" style="margin-left: 0" @click="stop">关闭</el-button>
                </div>
                <div v-loading="loading">
                    <el-card>
                        <el-row>
                            <el-col>
                                <el-input class="search" v-model.trim="search" clearable placeholder="搜索"></el-input>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :sm="12">
                                总上传/总下载：
                                <el-tag>{{ sizeFormat(total.uplink) }} / {{ sizeFormat(total.downlink) }}</el-tag>
                            </el-col>
                            <el-col :sm="12">
                                总流量：<el-tag>{{ sizeFormat(total.uplink + total.downlink) }}</el-tag>
                            </el-col>
                        </el-row>
                    </el-card>
                    <div v-for="inbound in inbounds" style="margin-top: 10px;">
                        <!-- vmess -->
                        <el-card v-if="inbound.searched && inbound.protocol === 'vmess'"
                                 v-for="(client, index) in inbound.settings.clients">
                            <div slot="header">
                                <el-tag type="success">{{ inbound.protocol }}-{{ inbound.streamSettings.network }}</el-tag>
                                <el-button v-if="inbound.enable" type="primary" size="mini" icon="el-icon-edit" @click="openEdit(inbound, client)"></el-button>
                                <el-button v-if="inbound.enable" type="danger" size="mini" style="margin-left: 0" @click="disable(inbound)">禁用</el-button>
                                <el-button v-else type="success" size="mini" style="margin-left: 0" @click="enable(inbound)">启用</el-button>
                                <el-button v-if="inbound.enable && !isEmpty(inbound.tag)" type="warning" size="mini" style="margin-left: 0" @click="resetTraffic(inbound)">重置</el-button>
                                <el-button v-else-if="inbound.enable" type="success" size="mini" style="margin-left: 0" @click="openTraffic(inbound)">开启流量统计</el-button>
                                <el-button v-if="inbound.enable" type="danger" size="mini" icon="el-icon-delete" style="margin-left: 0" @click="del(inbound)"></el-button>
                                <el-button v-else type="danger" size="mini" icon="el-icon-delete" style="margin-left: 0" @click="delDisabled(inbound)"></el-button>
                            </div>
                            <el-row>
                                <el-col :sm="12">
                                    <el-button class="clipboard" type="primary" size="mini" :data-clipboard-text="vmessLink(inbound, client)">复制vmess链接</el-button>
                                </el-col>
                                <el-col :sm="12">
                                    <el-button type="primary" size="mini" @click="showQrCode(vmessLink(inbound, client))">二维码</el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :sm="12">
                                    IP：<el-tag>{{ inbound.listen === '0.0.0.0' ? ip : inbound.listen }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    端口：<el-tag>{{ inbound.port }}</el-tag>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :sm="12">
                                    用户ID：<el-tag>{{ client.id }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    额外id（alterId）：<el-tag>{{ client.alterId }}</el-tag>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :sm="12">
                                    加密：<el-tag>auto</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    传输协议：<el-tag>{{ inbound.streamSettings.network }}</el-tag>
                                </el-col>
                            </el-row>
                            <!-- kcp -->
                            <el-row v-if="inbound.streamSettings.network === 'kcp'">
                                <el-col :sm="12">
                                    伪装类型：<el-tag>{{ inbound.streamSettings.kcpSettings.header.type }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    上行/下行链路容量：
                                    <el-tag>
                                        {{ inbound.streamSettings.kcpSettings.uplinkCapacity }} /
                                        {{ inbound.streamSettings.kcpSettings.downlinkCapacity }}
                                    </el-tag>
                                </el-col>
                            </el-row>
                            <!-- ws -->
                            <el-row v-if="inbound.streamSettings.network === 'ws'">
                                <el-col :sm="12">
                                    路径：<el-tag>{{ inbound.streamSettings.wsSettings.path }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    HTTP 头：
                                    <span v-if="JSON.stringify(inbound.streamSettings.wsSettings.headers) === '{}'">无</span>
                                    <el-button v-else type="text" @click="showHeaders(inbound.streamSettings.wsSettings.headers)">查看</el-button>
                                </el-col>
                            </el-row>
                            <!-- http2 -->
                            <el-row v-if="inbound.streamSettings.network === 'http'">
                                <el-col :sm="12">
                                    路径：<el-tag>{{ inbound.streamSettings.httpSettings.path }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    Host：
                                    <span v-if="JSON.stringify(inbound.streamSettings.httpSettings.host) === '[]'">无</span>
                                    <el-button v-else type="text" @click="showHosts(inbound.streamSettings.httpSettings.host)">查看</el-button>
                                </el-col>
                            </el-row>
                            <el-row v-if="inbound.streamSettings.security === 'tls'">
                                <el-col :sm="12">
                                    证书域名：<el-tag>{{ inbound.streamSettings.tlsSettings.serverName }}</el-tag>
                                </el-col>
                            </el-row>
                            <el-row v-if="!isEmpty(inbound.remark)">
                                <el-col :sm="12">
                                    备注：<el-tag type="success">{{ inbound.remark }}</el-tag>
                                </el-col>
                            </el-row>
                            <el-row v-if="!isEmpty(inbound.tag)">
                                <el-col :sm="12">
                                    上传/下载：
                                    <el-tag>{{ sizeFormat(inbound.uplink) }} / {{ sizeFormat(inbound.downlink) }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    总流量：<el-tag>{{ sizeFormat(inbound.uplink + inbound.downlink) }}</el-tag>
                                </el-col>
                            </el-row>
                        </el-card>
                        <!-- other -->
                        <el-card v-if="inbound.searched && protocols.indexOf(inbound.protocol) >= 0">
                            <div slot="header">
                                <el-tag type="success">{{ inbound.protocol }}</el-tag>
                                <el-button v-if="inbound.enable" type="primary" size="mini" icon="el-icon-edit" @click="openEdit(inbound)"></el-button>
                                <el-button v-if="inbound.enable" type="danger" size="mini" style="margin-left: 0" @click="disable(inbound)">禁用</el-button>
                                <el-button v-else type="success" size="mini" style="margin-left: 0" @click="enable(inbound)">启用</el-button>
                                <el-button v-if="inbound.enable && !isEmpty(inbound.tag)" type="warning" size="mini" style="margin-left: 0" @click="resetTraffic(inbound)">重置</el-button>
                                <el-button v-else-if="inbound.enable" type="success" size="mini" style="margin-left: 0" @click="openTraffic(inbound)">开启流量统计</el-button>
                                <el-button v-if="inbound.enable" type="danger" size="mini" icon="el-icon-delete" style="margin-left: 0" @click="del(inbound)"></el-button>
                                <el-button v-else type="danger" size="mini" icon="el-icon-delete" style="margin-left: 0" @click="delDisabled(inbound)"></el-button>
                            </div>
                            <!-- shadowsocks -->
                            <template v-if="inbound.protocol === 'shadowsocks'">
                                <el-row>
                                    <el-col :sm="12">
                                        <el-button class="clipboard" type="primary" size="mini" :data-clipboard-text="ssLink(inbound)">复制ss链接</el-button>
                                    </el-col>
                                    <el-col :sm="12">
                                        <el-button type="primary" size="mini" @click="showQrCode(ssLink(inbound))">二维码</el-button>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        IP：<el-tag>{{ inbound.listen === '0.0.0.0' ? ip : inbound.listen }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        端口：<el-tag>{{ inbound.port }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        加密：<el-tag>{{ inbound.settings.method }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        密码：<el-tag>{{ inbound.settings.password }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        网络：<el-tag>{{ inbound.settings.network ? inbound.settings.network : 'tcp' }}</el-tag>
                                    </el-col>
                                    <el-col v-if="!isEmpty(inbound.remark)" :sm="12">
                                        备注：<el-tag type="success">{{ inbound.remark }}</el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                            <!-- dokodemo-door -->
                            <template v-if="inbound.protocol === 'dokodemo-door'">
                                <el-row>
                                    <el-col :sm="12">
                                        IP：<el-tag>{{ inbound.listen === '0.0.0.0' ? ip : inbound.listen }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        端口：<el-tag>{{ inbound.port }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        转发的地址：<el-tag>{{ inbound.settings.address }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        转发的端口：<el-tag>{{ inbound.settings.port }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        转发的底层协议：<el-tag>{{ inbound.settings.network ? inbound.settings.network : 'tcp' }}</el-tag>
                                    </el-col>
                                    <el-col v-if="!isEmpty(inbound.remark)" :sm="12">
                                        备注：<el-tag type="success">{{ inbound.remark }}</el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                            <!-- mtproto -->
                            <template v-if="inbound.protocol === 'mtproto'">
                                <el-row>
                                    <el-col :sm="12">
                                        <el-button class="clipboard" type="primary" size="mini" :data-clipboard-text="mtLink(inbound)">复制链接</el-button>
                                    </el-col>
                                    <el-col :sm="12">
                                        <el-button type="primary" size="mini" @click="window.open(mtLink(inbound))">直接打开</el-button>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        IP：<el-tag>{{ inbound.listen === '0.0.0.0' ? ip : inbound.listen }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        端口：<el-tag>{{ inbound.port }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :sm="12">
                                        密钥：<el-tag>{{ inbound.settings.users[0].secret }}</el-tag>
                                    </el-col>
                                    <el-col v-if="!isEmpty(inbound.remark)" :sm="12">
                                        备注：<el-tag type="success">{{ inbound.remark }}</el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                            <!-- socks and http -->
                            <template v-if="inbound.protocol === 'socks' || inbound.protocol === 'http'">
                                <el-row>
                                    <el-col :sm="12">
                                        IP：<el-tag>{{ inbound.listen === '0.0.0.0' ? ip : inbound.listen }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        端口：<el-tag>{{ inbound.port }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row v-if="inbound.protocol === 'socks'">
                                    <el-col :sm="12">
                                        <el-tooltip v-if="inbound.settings.auth === 'password' && inbound.settings.accounts.length === 0">
                                            <div slot="content">使用了密码认证但是未设置用户名和密码，将导致无法连接</div>
                                            <i class="el-icon-warning"></i>
                                        </el-tooltip>
                                        认证：<el-tag>{{ inbound.settings.auth === 'password' ? '密码认证' : '无' }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        udp：<el-tag>{{ inbound.settings.udp ? '开启' : '关闭' }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row v-if="(inbound.protocol === 'socks' && inbound.settings.auth === 'password')
                                             || inbound.protocol === 'http'" v-for="(account, index) in inbound.settings.accounts">
                                    <el-col :sm="12">
                                        用户名 {{ index + 1 }}：<el-tag>{{ account.user }}</el-tag>
                                    </el-col>
                                    <el-col :sm="12">
                                        密码 {{ index + 1 }}：<el-tag>{{ account.pass }}</el-tag>
                                    </el-col>
                                </el-row>
                                <el-row v-if="!isEmpty(inbound.remark)">
                                    <el-col :sm="12">
                                        备注：<el-tag type="success">{{ inbound.remark }}</el-tag>
                                    </el-col>
                                </el-row>
                            </template>
                            <el-row v-if="!isEmpty(inbound.tag)">
                                <el-col :sm="12">
                                    上传/下载：
                                    <el-tag>{{ sizeFormat(inbound.uplink) }} / {{ sizeFormat(inbound.downlink) }}</el-tag>
                                </el-col>
                                <el-col :sm="12">
                                    总流量：<el-tag>{{ sizeFormat(inbound.uplink + inbound.downlink) }}</el-tag>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </div>
            </el-card>
        </transition>
    </el-main>

    <el-dialog th:replace="v2ray/account_dialog :: account_dialog"></el-dialog>

    <el-dialog title="二维码" :visible.sync="qrCodeDL.visible" width="300px">
        <canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
    </el-dialog>
</el-container>

<div th:include="common/common_js :: commonJs"></div>
<script src="/res/clipboard/clipboard.min.js"></script>
<script src="/res/base64/base64.min.js"></script>
<script src="/res/qrcode/qrious.min.js"></script>
<script src="/res/js/v2ray/accounts.js?v=3.1.0"></script>

</body>
</html>